<template>
  <div class="iframe">
    <div class="i-title">
      <h3>watchEffect 侦听数据</h3>
    </div>
    <div class="i-tip">
      随机数： {{str}}
    </div>
    <div class="i-tip">
      生成次数： {{strTip}}
    </div>
  </div>
</template>

<script>
  import {
    ref,
    watchEffect
  } from 'vue'
  export default {
    name: "hello",
    setup() {
      let str = ref(0);
      let strTip = ref("...");
      let num = ref(0);
      let count = ref(0);
      setInterval(() => {
        num.value = Math.floor(Math.random() * (100 - 1)) + 1;
        str.value = num.value;
      }, 1000);
      watchEffect(() => {
        console.log(num.value);
        count.value++;
        strTip.value = count.value;
      })
      return {
        str,
        strTip
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
